<template>
    <div class="main forecast">
        <div class="select-box">
            <div class="clearfix">
                <div class="select" id="kucundalei">
                    <div class="th">库存大类</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" name="kucundalei" value="" />
                        <ul class=""></ul>
                    </div>
                </div>
                <div class="select cur" id="kucunxiaolei">
                    <div class="th">库存小类</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" name="kucunxiaolei" value="" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select" id="wuliaobianhao">
                    <div class="th">物料编号</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" name="wuliaobianhao" value="" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">计划类别</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" name="jihualeibie" value="" readonly="readonly" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">智能分类</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" name="zhinengfenlei" value="" readonly="readonly" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">供应商名称</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" name="gongyingshang" value="" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">采购员</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" name="caigouyuan" value="" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">Sourcing</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" name="sourcing" value="" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">计划员</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" name="jihuayuan" value="" />
                        <ul></ul>
                    </div>
                </div>
                <div class="select">
                    <div class="th">下单开始日期</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" name="kaishiriqi" id="startDate" value="" readonly="readonly" />
                    </div>
                </div>
                <div class="select">
                    <div class="th">下单结束日期</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" name="jieshuriqi" id="endDate" value="" readonly="readonly" />
                    </div>
                </div>
                <div class="select">
                    <div class="th">建议日期</div>
                    <div class="td">
                    	<div class="ipt-clear">ｘ</div>
                        <input type="text" name="jianyiriqi" id="aDate" value="" readonly="readonly" />
                    </div>
                </div>
            </div>
            <div class="clearfix">
                <div class="operation">
                    <div class="query">查询</div>
                    <div class="reset">重置</div>
                </div>
            </div>
        </div>
        <div class="title">提货对比</div>
        <div class="frame">
        	<div class="frame-loadding80" v-if="tableLoadding0"></div>
        	<div class="frame-content" v-if="tableShow0">
		        <table border="1" cellspacing="0" cellpadding="0" class="table">
		            <tr class="tdWidth">
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="6%"></td>
		                <td width="6%"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="4.2%"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="4%"></td>
		                <td width="*"></td>
		                <td width="4.5%"></td>
		            </tr>
		            <tr class="thead">
		                <td>订单号</td>
		                <td>描述</td>
		                <td>OPO</td>
		                <td>库存</td>
		                <td>已发放需求</td>
		                <td>未发放需求</td>
		                <td>分类</td>
		                <td>sunm(7)</td>
		                <td>sunm(15)</td>
		                <td v-for="td in tableTitle0">{{td}}</td>
		                <td>Planner</td>
		                <td>Buyer</td>
		                <td>sourcing</td>
		            </tr>
		            <tr v-for="(tr,index) in tableList0.items">
	            		<td rowspan="2" v-if="index1 < 2 && index % 2 ==0" v-for="(td,index1) in tr">{{td}}</td>
	            		<td v-if="index1 >= 2 " v-for="(td,index1) in tr">{{td}}</td>
		                <!--<td rowspan="2" v-if="index1 % 2 == 0">{{index1}}</td>
		                <td>1</td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td>计划需求</td>
		                <td>111</td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>	-->
		            </tr>
		        </table>
		    </div>
	   		<div class="frame-error" v-if="noData0">暂无数据...</div>
        </div>
        <div class="title">采购申请对比</div>
        <div class="frame">
        	<div class="frame-loadding80"></div>
        	<div class="frame-content ">
		        <table border="1" cellspacing="0" cellpadding="0" class="table">
		            <tr class="tdWidth">
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="4%"></td>
		                <td width="4%*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="*"></td>
		                <td width="4%"></td>
		                <td width="*"></td>
		            </tr>
		            <tr>
		                <td>物料</td>
		                <td>描述</td>
		                <td colspan="6">预测需求</td>
		                <td colspan="4">历史用量</td>
		                <td>用在途可用量</td>
		                <td>建议投放数量</td>
		                <td>分类</td>
		                <td>sunm(7)</td>
		                <td>sunm(15)</td>
		                <td>10/10</td>
		                <td>10/11</td>
		                <td>10/12</td>
		                <td>10/13</td>
		                <td>10/14</td>
		                <td>10/15</td>
		                <td>10/16</td>
		                <td>10/17</td>
		                <td>10/18</td>
		                <td>10/19</td>
		                <td>10/20</td>
		                <td>10/21</td>
		                <td>10/22</td>
		                <td>10/23</td>
		                <td>10/24</td>
		                <td>Planner</td>
		                <td>Buyer</td>
		            </tr>
		            <tr>
		                <td rowspan="2"></td>
		                <td rowspan="2"></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td rowspan="2"></td>
		                <td rowspan="2"></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		            </tr>
		            <tr>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		                <td></td>
		            </tr>
		        </table>
		    </div>
	   		<div class="frame-error">暂无数据...</div>
        </div>
    </div>
</template>

<script>
	import calender from '../common/js/calender';
    import common from '../common/js/common';
    import headers from './login';
    import tpls from '../common/js/tpls';
    import echarts from 'echarts';
    export default{
        components:{
        },
        data(){
            return{
            	noData0:false,
            	noData1:false,
            	tableLoadding0:true,
            	tableLoadding1:true,
            	tableShow0:false,
            	tableShow1:false,
            	tableTitle0:[],
            	tableTitle1:[],
            	tableList0:{},
            	tableList1:{},
                postData0:{
                	"item_big_class":"",
	                "item_small_class":"",
	                "item":"",
	                "plan_class":"",
	                "category":"",
	                "buyer":"",
	                "souring":"",
	                "planner":"",
	                "start_date":"",
	                "end_date":"",
	                "suggest_date":"",
	                "sourcing":"",
	                "page":1
                }
            }
        },
        methods:{
        	getTable0:function(){
        		var dataThis = this;
        		common.getData(common.url_constitute.differenceMap0,"post",dataThis.postData0,function(data){
	          		dataThis.tableLoadding0 = false;	//隐藏loadding
	          		if(data.data.code==1024){
	          			if(data.data.result.length<1){
	                		dataThis.tableShow0 = false;
	                		dataThis.noData0 = true;
	                	}else{
							dataThis.tableShow0 = true;		//显示数据dom
							dataThis.tableTitle0 = data.data.title;
							dataThis.tableList0 = data.data.result;
	                	}
	          		}
	          	})
        	}
        },
        created(){
        	this.getTable0();
        },
        mounted(){
            common.selectFunction();
            common.selectDate("#startDate");
            common.selectDate("#endDate");
            common.selectDate("#aDate");
        }
    }
</script>

<style>
</style>
